<!-- home -->
<template>
  <div class="container">
    <van-nav-bar
      title="我的任务"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-cell title="填报人：" v-model="ywyname" />

    <!--<van-cell title="选择月份" required v-model="date" @click="onDisplay" is-link />
-->
    <!--   <van-calendar v-model="dateshow" @close="onClose" @confirm="onConfirm" :show-confirm="kjflag"  :min-date="minDate"/>-->

    <van-popup v-model="dateshow" round position="bottom" :style="{ height: '50%' }" >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="onConfirmNy"
        @cancel="oncancel"
      />
    </van-popup>

    <div v-for="item in taskList " :key="item.taskid">
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1" :title="item.ssyf" :value="item.tasknum">
          <van-cell title="1-8号" :value="item.firstTaskNum"> </van-cell>
          <van-cell title="9-15号" :value="item.secondTaskNum"> </van-cell>
          <van-cell title="16-23号" :value="item.thirdTaskNum"> </van-cell>
          <van-cell title="24号以后" :value="item.fourthTaskNum"> </van-cell>
          <div style="display: flex;flex-direction: row;width: 100%;align-items: flex-end">
            <van-button type="info" class="btn" @click="doModify(item)" v-if="item.qrbz != '1'">修改</van-button>
          </div>

        </van-collapse-item>
      </van-collapse>
    </div>

    <div class="dibu">
      <div style="position: absolute;right: 20px;font-size: 20px;">合计: {{total}}元</div>
    </div>
  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell, DatetimePicker } from 'vant'
import { floatAdd, floatSub, floatMul, floatDiv } from '../../utils/NumberUtil'
import { addBusitask, listBusitask, queryUserInfo } from '../../api/api'

export default {
  name: 'MyTask',
  data() {
    return {
      companyListFront: [],
      companyList1: [],
      platformProductCategory: [],
      platformCategory: '',
      productList: [],
      pageNum: 1,
      pageSize: 10,
      date: '',
      currentDate: new Date(),
      show: false,
      kjflag: false,
      showfblx: false,
      showspdl: false,
      ywlxname: '',
      ywlx: '',
      dateshow: false,
      actions: [],
      dkactions: [],
      dklxname: '',
      dklx: '',
      dklxshow: false,
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2029, 12, 31),
      zje: 0,
      ywyname: '',
      firstTaskNum: '',
      secondTaskNum: '',
      thirdTaskNum: '',
      fourthTaskNum: '',
      activeNames: [],
      userid: '',
      taskList: [],
      total: ''
    }
  },

  created() {
    this.ywyname = this.$store.getters.userName
    this.userid = this.$store.getters.userId
    this.queryUserInfo()
  },
  mounted() {

  },

  methods: {

    queryUserInfo() {
      const param = {}
      const userid = this.$store.getters.userId
      param.userid = userid
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.deptname = response.data.deptname
          this.deptid = response.data.deptid
          this.postList = response.data.postList
          this.name = response.data.name
          this.userid = response.data.userid
          this.listBusitask()
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },

    onDisplay() {
      this.dateshow = true
    },
    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}/${date1.getMonth() + 1}/${date1.getDate()}`
    },

    doSubmit() {
      if (!this.date) {
        Toast.fail('请选择月份')
        return
      }

      if (!this.zje) {
        Toast.fail('请填写目标金额')
        return
      }

      const param = { ssyf: this.date, tasknum: this.zje, firstTaskNum: this.firstTaskNum, secondTaskNum: this.secondTaskNum, thirdTaskNum: this.thirdTaskNum, fourthTaskNum: this.fourthTaskNum }
      addBusitask(param).then(response => {
        if (response.code === 200) {
          Dialog.alert({
            title: '',
            message: '提交成功'
          }).then(() => {
            // on close
            this.$router.go(-1) // 返回上一层
          })
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    listBusitask() {
      const param = {}
      param.userid = this.userid
      listBusitask(param).then(response => {
        if (response.code === 200) {
          console.log('任务列表')
          console.log(response)
          const taskList = response.rows

          let total = 0
          if (taskList) {
            for (var i = 0; i < taskList.length; i++) {
              total = floatAdd(total, taskList[i].tasknum)
            }
          }
          this.total = total

          this.taskList = taskList
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    onConfirmNy(event) {
      console.log(event)
      var year = event.getFullYear() + ''
      var month = (event.getMonth() + 1) + ''
      var date = year + (month < 10 ? '0' : '') + month
      this.date = date
      this.dateshow = false
    },

    oncancel() {
      this.dateshow = false
    },

    onChangeTaskNum1(value) {
      let zje = 0
      // let firstTaskNum = this.firstTaskNum
      const secondTaskNum = parseFloat(this.secondTaskNum)
      const thirdTaskNum = parseFloat(this.thirdTaskNum)
      const fourthTaskNum = parseFloat(this.fourthTaskNum)
      zje = floatAdd(parseFloat(value), floatAdd(floatAdd(secondTaskNum, thirdTaskNum), fourthTaskNum))
      this.zje = zje
    },

    onChangeTaskNum2(value) {
      let zje = 0
      const firstTaskNum = this.firstTaskNum
      // let secondTaskNum = parseFloat(this.secondTaskNum)
      const thirdTaskNum = parseFloat(this.thirdTaskNum)
      const fourthTaskNum = parseFloat(this.fourthTaskNum)
      zje = floatAdd(parseFloat(value), floatAdd(floatAdd(firstTaskNum, thirdTaskNum), fourthTaskNum))
      this.zje = zje
    },

    onChangeTaskNum3(value) {
      let zje = 0
      const firstTaskNum = this.firstTaskNum
      const secondTaskNum = parseFloat(this.secondTaskNum)
      // let thirdTaskNum = parseFloat(this.thirdTaskNum)
      const fourthTaskNum = parseFloat(this.fourthTaskNum)
      zje = floatAdd(parseFloat(value), floatAdd(floatAdd(firstTaskNum, secondTaskNum), fourthTaskNum))
      this.zje = zje
    },

    onChangeTaskNum4(value) {
      let zje = 0
      const firstTaskNum = this.firstTaskNum
      const secondTaskNum = parseFloat(this.secondTaskNum)
      const thirdTaskNum = parseFloat(this.thirdTaskNum)
      // let fourthTaskNum = parseFloat(this.fourthTaskNum)
      zje = floatAdd(parseFloat(value), floatAdd(floatAdd(firstTaskNum, secondTaskNum), thirdTaskNum))
      this.zje = zje
    },

    doModify(item) {
      console.log(item)
      this.$router.push({ path: '/addTask', query: { item: item }})
    }
  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh);
    background-color: white;
  }

  .navclass{
    background-color:#f8f8f8;
  }

  .btn{
    margin-left: 80%;
    margin-top: 5px;
  }

  .dibu{
    left: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 30px;
    background-color: #F0F4FE;
    box-shadow: 10px 10px 5px #888888;
    color: black;
  }

</style>
